<template>
  <div style="padding:0px 8px">
    <el-card class="configContainer" shadow="always">
      <div style="display: flex;flex-direction: row;align-items: center">
        <h4 class="card-title"> 所有配置 </h4>
        <div class="space"/>
        <el-button type="primary" @click="showAdd">新增配置</el-button>
      </div>
      <el-divider/>
      <div style="margin: 8px">
        <div class="demo-form-inline">
          <el-select clearable v-model="searchForm.semester" placeholder="学期" style="width:200px;margin-right: 16px;">
            <el-option label="七年级上学期" :value="1"/>
            <el-option label="七年级下学期" :value="2"/>
            <el-option label="八年级上学期" :value="3"/>
            <el-option label="八年级下学期" :value="4"/>
            <el-option label="九年级上学期" :value="5"/>
            <el-option label="九年级下学期" :value="6"/>
          </el-select>

          <el-select clearable v-model="searchForm.sex" placeholder="性别" style="width:200px;margin-right: 16px;">
            <el-option label="男" :value="1"/>
            <el-option label="女" :value="2"/>
            <el-option label="通用" :value="0"/>
          </el-select>
          <el-select clearable v-model="searchForm.type" placeholder="类型" style="width:200px;margin-right: 16px;">
            <el-option label="必考" :value="1"/>
            <el-option label="6选2" :value="2"/>
            <el-option label="8选2" :value="3"/>
            <el-option label="体质健康对应" :value="4"/>
          </el-select>
          <el-button type="primary" @click="load">
            <el-icon>
              <Search/>
            </el-icon>
            搜索
          </el-button>
          <el-button @click="reset()">重置</el-button>
        </div>
        <el-table height="400px" :header-cell-style="{background:'#f8f8f8',height:'40px',color:'#2b2b2b'}" :data="list"
                  style="width: 100%;margin-top: 16px;"
                  @selection-change="handleSelectionChange">
          <el-table-column fixed prop="id" label="id" width="120">
          </el-table-column>
          <el-table-column fixed prop="subName" label="项目名" width="120">
          </el-table-column>
          <el-table-column fixed prop="type" label="类型">
            <template #default="scope">
              <el-tag v-if="scope.row.type == 1" type="success">必考</el-tag>
              <el-tag v-else-if="scope.row.type == 2" type="info">6选2</el-tag>
              <el-tag v-else-if="scope.row.type == 3" type="danger">8选2</el-tag>
              <el-tag v-else-if="scope.row.type == 4">体质健康对应</el-tag>
              <el-tag v-else="" type="warning">未知</el-tag>
            </template>
          </el-table-column>

          <el-table-column fixed prop="semester" label="学期">
            <template #default="scope">
              <el-tag v-if="scope.row.semester == 1" type="success">七年级上学期</el-tag>
              <el-tag v-else-if="scope.row.semester == 2" type="info">七年级下学期</el-tag>
              <el-tag v-else-if="scope.row.semester == 3" type="warning">八年级上学期</el-tag>
              <el-tag v-else-if="scope.row.semester == 4" type="danger">八年级下学期</el-tag>
              <el-tag v-else-if="scope.row.semester == 5">九年级上学期</el-tag>
              <el-tag v-else-if="scope.row.semester == 6">九年级下学期</el-tag>

            </template>
          </el-table-column>
          <el-table-column fixed prop="sex" label="性别">
            <template #default="scope">
              <el-tag v-if="scope.row.sex == 1" type="success">男</el-tag>
              <el-tag v-else-if="scope.row.sex == 2" type="danger">女</el-tag>
              <el-tag v-else-if="scope.row.sex == 0">通用</el-tag>
              <el-tag v-else="" type="warning">未知</el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed prop="createTime" label="创建时间">
          </el-table-column>
          <el-table-column fixed prop="updateTime" label="更新时间">
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="showEdit(scope.row)" style="margin-left: 12px">
                <el-icon>
                  <Edit/>
                </el-icon>
                编辑
              </el-button>
              <el-popconfirm title="确认删除吗?" @confirm="del(scope.row.id)">
                <template #reference>
                  <el-button link type="danger" size="small">
                    <el-icon>
                      <Delete/>
                    </el-icon>
                    删除
                  </el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-pagination
          :page-sizes="[10, 20, 50, 100]"
          :page-count="pagecount"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="currentChange"
          style="margin-top: 16px;width: 100%;display: flex;align-items: center;justify-content: center;"
          background layout="total, sizes, prev, pager, next, jumper"/>
    </el-card>
  </div>
  <el-dialog v-model="show" title="新增配置" center>
    <el-form ref="add" :rules="addRules" :model="schedule">
    <el-form-item prop="semester" label="学期" label-width="100px">
      <el-select @change="selectChange(schedule.semester)" v-model="schedule.semester" placeholder="学期"
                 style="width:100%">
        <el-option label="七年级上学期" :value="1"/>
        <el-option label="七年级下学期" :value="2"/>
        <el-option label="八年级上学期" :value="3"/>
        <el-option label="八年级下学期" :value="4"/>
        <el-option label="九年级上学期" :value="5"/>
        <el-option label="九年级下学期" :value="6"/>
      </el-select>
    </el-form-item>

    <el-form-item prop="subId" label="项目" label-width="100px">
      <el-select v-model="schedule.subId" placeholder="项目" style="width:100%">
        <el-option v-for="item in subs" :label="item.name" :value="item.id"/>
      </el-select>
    </el-form-item>

    <el-form-item prop="sex" label="性别" label-width="100px">
      <el-select v-model="schedule.sex" placeholder="性别" style="width:100%">
        <el-option label="男" :value="1"/>
        <el-option label="女" :value="2"/>
        <el-option label="通用" :value="0"/>
      </el-select>
    </el-form-item>

    <el-form-item prop="type" label="类型" label-width="100px">
      <el-select v-model="schedule.type" placeholder="类型" style="width:100%">
        <el-option label="必考" :value="1"/>
        <el-option label="6选2" :value="2"/>
        <el-option label="8选2" :value="3"/>
        <el-option label="体质健康对应" :value="4"/>
      </el-select>
    </el-form-item>
    </el-form>
    <template #footer>
            <span class="dialog-footer">
                <el-button @click="show = false">取消</el-button>
                <el-button type="primary" @click="add()">确定</el-button>
            </span>
    </template>
  </el-dialog>
  <el-dialog v-model="show_edit" title="更新配置" center>
    <el-form ref="edit" :rules="editRules" :model="schedule">
    <el-form-item label="ID" label-width="100px">
      <el-input v-model='schedule.id' disabled></el-input>
    </el-form-item>
    <el-form-item label="项目" label-width="100px">
      <el-select v-model="schedule.subId" placeholder="项目" style="width:100%" disabled>
        <el-option v-for="item in subjects" :label="item.name" :value="item.id"/>
      </el-select>
    </el-form-item>
    <el-form-item prop="semester" label="学期" label-width="100px">
      <el-select v-model="schedule.semester" placeholder="学期" style="width:100%">
        <el-option label="七年级上学期" :value="1"/>
        <el-option label="七年级下学期" :value="2"/>
        <el-option label="八年级上学期" :value="3"/>
        <el-option label="八年级下学期" :value="4"/>
        <el-option label="九年级上学期" :value="5"/>
        <el-option label="九年级下学期" :value="6"/>
      </el-select>
    </el-form-item>

    <el-form-item  prop="sex" label="性别" label-width="100px">
      <el-select v-model="schedule.sex" placeholder="性别" style="width:100%">
        <el-option label="男" :value="1"/>
        <el-option label="女" :value="2"/>
        <el-option label="通用" :value="0"/>
      </el-select>
    </el-form-item>

    <el-form-item prop="type" label="类型" label-width="100px">
      <el-select v-model="schedule.type" placeholder="类型" style="width:100%">
        <el-option label="必考" :value="1"/>
        <el-option label="6选2" :value="2"/>
        <el-option label="8选2" :value="3"/>
        <el-option label="体质健康对应" :value="4"/>
      </el-select>
    </el-form-item>
    </el-form>
    <template #footer>
            <span class="dialog-footer">
                <el-button @click="show_edit = false">取消</el-button>
                <el-button type="primary" @click="edit()">确定</el-button>
            </span>
    </template>
  </el-dialog>
  <CompanyText/>
</template>

<script>
import CompanyText from "../../../components/CompanyText.vue";

export default {

  name: "schoolManagerPage",
  props: {
    // msg: String
  },
  components: {
    CompanyText
  },
  data() {
    return {
      subs: [],
      searchForm: {},
      schedule: {},
      schoolId: 1,
      uploadDialogVisible: false,
      editName: "",
      editId: 0,
      schoolName: "",
      id: "",
      current: 1,
      size: 10,
      list: [],
      subjects: [],
      contact: '',
      name: '',
      phone: '',
      show: false,
      show_edit: false,
      addRules: {
        semester: [{required: true, message: "学期必选", trigger: ['change'], type: 'number'},],
        subId: [{required: true, message: "项目必选", trigger: ['change'], type: 'number'},],
        type: [{required: true, message: "类型必选", trigger: ['change'], type: 'number'},],
        sex: [{required: true, message: "性别必选", trigger: ['change'], type: 'number'},],
      },
      editRules: {
        semester: [{required: true, message: "学期必选", trigger: ['change'], type: 'number'},],
        subId: [{required: true, message: "项目必选", trigger: ['change'], type: 'number'},],
        type: [{required: true, message: "类型必选", trigger: ['change'], type: 'number'},],
        sex: [{required: true, message: "性别必选", trigger: ['change'], type: 'number'},],
      },
    }
  },
  created() {
    this.load();
    this.getSubjects();
  },
  methods: {
    getSubjects() {
      let that = this;
      this.$http.get('/subject/getAllSubject')
          .then(function (response) {
            that.subjects = response.data;
            console.info(that.subjects)
          }).catch(function (error) {
        console.log('error');
      });
    },
    showEdit(item) {
      this.show_edit = true;
      this.schedule = {...item};
    },
    showAdd() {
      this.schedule = {};
      this.show = true;
    },
    reset() {
      this.searchForm = {};
      this.load();
    },
    selectChange(semester) {
      let that = this;
      that.schedule.subId = null;
      that.subs = []
      that.$http.post('/subject/getAllSubBySemester?semester=' + semester,)
          .then(function (response) {
            that.subs = response.data;
            console.info(that.subs)
          }).catch(function (error) {
        console.log('error');
      })
    },
    load() {
      let that = this;
      this.$http.post('/electiveSub/getElectiveSubList', that.searchForm).then(function (response) {
        console.log('success' + response);
        that.list = response.data.records;
        that.pagecount = response.data.pages;
        that.total = response.data.total;
        that.current = response.data.current;
      }).catch(function (error) {
        console.log('error');
      });
    },
    add() {
      let that = this;
      this.$refs.add.validate((valid, fields) => {
        if (valid) {
          this.$http.post('/electiveSub/add',
              that.schedule
          ).then(function (response) {
            console.log('success' + response.data);
            if (response.code === 0) {
              console.log('success');
              that.$message.success(response.userMsg)
              that.show = false;
              that.load()
              that.$refs.add.resetFields();
            }
          }).catch(function (error) {
            console.log('error');
          });
        }
      })

    },
    del(id) {
      let that = this;
      this.$http.post('/electiveSub/del', {
        "id": id,
      }).then(function (response) {
        console.log('success' + response.data);
        if (response.code === 0) {
          console.log('success');
          that.$message.success(response.userMsg)
          that.show = false;
          that.load()
        }
      }).catch(function (error) {
        console.log('error');
      });
    },
    edit() {
      let that = this;
      this.$refs.edit.validate((valid, fields) => {
        if (valid) {
          this.$http.post('/electiveSub/edit', that.schedule).then(function (response) {
            console.log('success' + response.data);
            if (response.code === 0) {
              console.log('success');
              that.$message.success(response.userMsg)
              that.show_edit = false;
              that.load()
              that.$refs.edit.resetFields();
            }
          }).catch(function (error) {
            console.log('error');
          });

        }
      })
    },
    currentChange(current) {
      this.searchForm.current = current;
      console.info(this.current)
      this.load();
    },
    handleSizeChange(size) {
      this.searchForm.size = size;
      console.info(this.size)
      this.load();
    },
  },
}
</script>

<style scoped>
.configContainer {
  margin: 10px 8px;
  padding: 0px;
  /* border: red 1px solid; */
}
</style>
